<template>
	<div>
		<el-form ref="form" :model="menu" size="small" label-width="80px">
			<el-form-item label="菜单名称">
				<el-input v-model="menu.name"></el-input>
			</el-form-item>
			<el-form-item label="上级菜单">
				<el-cascader :props="cascadeprops" @change="changeparent" expand-trigger="hover" style="width: 100%" :options="menus" v-model="parentids">
				</el-cascader>
			</el-form-item>
			<el-form-item label="授权标识">
				<el-input v-model="menu.perms"></el-input>
			</el-form-item>
			<el-form-item label="菜单路由">
				<el-input v-model="menu.url" style="width: 70%;margin-right: 20px;" placeholder="路由格式：/user/list"></el-input>
				<el-tooltip placement="bottom" effect="light">
					<div slot="content">示例：用户管理：/sys/user </div>
					<i class="iconfont icon-info"></i>
				</el-tooltip>
			</el-form-item>
			<el-form-item label="序号">
				<el-input-number v-model="menu.orderNum" controls-position="right"  :min="1" :max="100"></el-input-number>
			</el-form-item>
			<el-form-item label="图标">
				<el-input v-model="menu.icon" style="width: 70%;margin-right: 20px;" placeholder="图标格式：icon-add"></el-input>
				<el-tooltip placement="bottom" effect="light">
					<div slot="content">推荐使用阿里图标库。<br/> 官网： https://www.iconfont.cn </div>
					<i class="iconfont icon-info"></i>
				</el-tooltip>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "MenuDetail",
    props:["menu","menus","parentids"],
		methods: {

      changeparent(value){
        this.menu.parentId = value[value.length-1];
      }
		},
		data() {
			return {
        cascadeprops: {
          value: "id",
          label: "name",
          children: "children"
        }
			}
		}
	}
</script>

<style>

</style>
